<template>
    <div class="payment">
        <div class="paymentTop">
            <img src="@/assets/back.png" alt="" @click="() => { router.go(-1) }">
            <p class="pageName">Quầy thu ngân</p>
            <div class="customer"></div>
        </div>
        <div class="iframeArea">
            <iframe :src="linkUrl" width="100%" style="border: none;height: 100%;   padding: 0;margin: 0;"></iframe>
        </div>
    </div>

</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
let router = useRouter()
let route = useRoute()
let linkUrl = ref<string>(route.query.linkUrl as string)
</script>

<style lang="less" scoped>
.payment {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F7F7FA;

    .paymentTop {
        min-height: 2.3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .8rem;

        &>img {
            display: block;
            width: 1.2rem;
            height: 24px;
        }

        .pageName {
            font-weight: 600;
            font-size: .9rem;
            color: #292B33;
            line-height: 1.3rem;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

    }

    .iframeArea {
        // height: 100%;
        flex: 1;
        width: 100%;
        overflow-y: auto;
        display: flex;

        iframe {
            flex: 1;
            overflow: scroll;
        }
    }
}
</style>